<template>
  <!--  设置符号弹框-->
  <div id="setBubble">
    <el-popover
        placement="bottom"
        width="500"
        v-model="visible">
      <p style="padding: 0 40px 0 20px">选择如何分组</p>
      <div class="radio" style="padding: 0 40px 15px 20px">
        <el-radio-group v-model="sectpart">
          <el-radio :label="1">默认区间</el-radio>
          <el-radio :label="2">自定义</el-radio>
        </el-radio-group>
      </div>

      <div v-if="sectpart==2">
        <div class="sectiongroup">
          <span>区间1</span>(
          <span>- ∞</span>,
          <span style="display: flex">
            <el-input
                v-model="section"
                placeholder="输入区间"
                class="input"
            ></el-input>)
          </span>
          <i class="el-icon-plus"></i>
        </div>

        <div class="sectiongroup" style="width: 59%">
          <span>区间2</span>[
          <span style="display: flex">
            <el-input
                v-model="section"
                placeholder="输入区间"
                class="input"
                :disabled="true"
            ></el-input>,
          </span>
          <span>- ∞</span>)
        </div>

        <div class="add" style="padding-left: 19px;color: #307ef2;cursor: pointer">
          <i class="el-icon-plus"></i>
          <span>增加区间</span>
        </div>
      </div>

      <el-divider></el-divider>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
      </div>
      <i class="el-icon-s-tools" slot="reference" style="color: #649fea"></i>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "setBubble",
  data() {
    return {
      visible: false,
      section: '',
      sectpart: 1,
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.radio {
  display: flex;
}

.sectiongroup {
  display: flex;
  justify-content: space-between;
  width: 67%;
  padding: 0 40px 15px 20px;
  ::v-deep .el-input__inner,
  .el-input.is-disabled{
    height: 30px;
  }
  .input {
    margin-right: 50px;
    width: 80px;
    border-radius: 2px;
    font-size: 12px;
    line-height: 15px;
  }

  .el-icon-plus {
    line-height: 25px;
    cursor: pointer;
  }
}
</style>
